<template>
	<view class="card">
		<image
			:src="img"
			mode=""></image>
		<view v-if="nameValue" class="">
			{{nameValue}}
		</view>
		<view v-if="capacity" class="capacity">
			♬{{capacity}}
		</view>
	</view>
</template>

<script>
	/*
	  卡片参数
	     @ img           图片  
		 @ nameValue     名称
		 @ capacity      播放量
	*/
	export default {
		name: 'musicCard',
		props: {
           img:{
				type:String,
				default:false
			},
			nameValue:{
				type:String,
				default:false
			},
			capacity:{
				type:String,
				default:false
			}
		},
		data() {
			return {}
		},
		watch: {

		},
		methods: {

		}
	}
</script>
<style lang="scss">
	.card {
		flex: 1;
		height: 350rpx;
		position: relative;
		font-size: 26rpx;
		box-sizing: border-box;
		padding: 8rpx;

		image {
			width: 100%;
			height: 70%;
			border-radius: 10rpx;
		}
		.capacity{
			position: absolute;
			top: 8rpx;
			right: 16rpx;
			color: #fff;
		}
	}
</style>
